<template>
    <view class="swiper-tabs">
        <scroll-view 
        ref="tabbar1" 
        class="tab-bar" 
        :scroll="false" 
        :scroll-x="true" 
        :enable-flex="true"
        :throttle="false"
        :scroll-left="scrollToLeft"
        :show-scrollbar="false" 
        scroll-with-animation>
            <view style="flex-direction: column;">
                <view style="flex-direction: row;">
                    <view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
                        :data-id="index" :data-current="index" @click="ontabtap">
                        <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
                    </view>
                </view>
                <view class="scroll-view-indicator">
                    <view ref="underline" class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''"
                        :style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>
                </view>
            </view>
        </scroll-view>
        <view class="tab-bar-line"></view>
        <swiper 
        class="swiper-view" 
        ref="swiper1" 
        :current="tabIndex" 
        :duration="300" 
        @change="onswiperchange"
        @transition="onswiperscroll" 
        @animationfinish="animationfinish" 
        @onAnimationEnd="animationfinish">
            <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
                <swiperPage :refresher="refresher" :action="action" class="swiper-page" :pid="page.pageid" ref="page"></swiperPage>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import { testApi } from '@/api'

    // 缓存每页最多
    const MAX_CACHE_DATA = 20;

    // 缓存页签数量
    const MAX_CACHE_PAGE = 3;
    const TAB_PRELOAD_OFFSET = 1;

    import swiperPage from './swiper-page.vue';

    export default {
	    name: 'mo-swiper-list',
        components: {
            swiperPage
        },
        props: {
            current: {
                type: [Number],
                default: 0
            }
        },
        data() {
            return {
                tabList: [],
                tabIndex: 0,
                scrollToLeft: 0,
                cacheTab: [],
                indicatorLineLeft: 0,
                indicatorLineWidth: 0,
                isTap: false,
                refresher: true
            }
        },
        created(){
            for (var i = 0; i < 10; i++) {
                this.tabList.push({
                    id: "tab" + i,
                    name: 'Tab ' + (i + 1),
                    pageid: i + 1
                })
            }
            this.tabIndex = this.current||0;
        },
        // onLoad() {
        // },
        // onReady() {
        // },
        mounted() {
            this.init(this.current);
        },
        methods: {
            action(page=1, size=10, param={}, total){
                const params = {
					test: '传入的测试数据',
                    ...param
				}
                return testApi(page, size, params, total)
            },
            init(index){
                this._lastTabIndex = index||0;
                this.swiperWidth = 0;
                this.tabListSize = {};
                this._touchTabIndex = index||0;

                // #ifndef MP-ALIPAY
                this.pageList = this.$refs.page;
                // #endif
                // #ifdef MP-ALIPAY
                this.pageList = [];
                for (var i = 0; i < this.tabList.length; i++) {
                    this.pageList.push(this.$refs['page' + i][0]);
                }
                // #endif
                this.switchTab(this.tabIndex);

                this.getTabbarItemsSize();
            },
            ontabtap(e) {
                let index = e.target.dataset.current || e.currentTarget.dataset.current;

                // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                this.isTap = true;
                var currentSize = this.tabListSize[index];
                this.updateIndicator(currentSize.left, currentSize.width);
                this._touchTabIndex = index;
                // #endif

                this.switchTab(index);
            },
            onswiperchange(e) {
                // 注意：百度小程序会触发2次

                // #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                let index = e.target.current || e.detail.current;
                this.switchTab(index);
                // #endif
            },
            onswiperscroll(e) {
                if (this.isTap) {
                    return;
                }
                this.refresher = false

                var offsetX = e.detail.dx;
                var preloadIndex = this._lastTabIndex;
                if (offsetX > TAB_PRELOAD_OFFSET) {
                    preloadIndex++;
                } else if (offsetX < -TAB_PRELOAD_OFFSET) {
                    preloadIndex--;
                }
                if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
                    return;
                }
                // if (this.pageList[preloadIndex].dataList.length === 0) {
                //     this.loadTabData(preloadIndex);
                // }

                /// 计算 tabbar 底线
                // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                var percentage = Math.abs(this.swiperWidth / offsetX);
                var currentSize = this.tabListSize[this._lastTabIndex];
                var preloadSize = this.tabListSize[preloadIndex];
                var lineL = currentSize.left + (preloadSize.left - currentSize.left) / percentage;
                var lineW = currentSize.width + (preloadSize.width - currentSize.width) / percentage;
                this.updateIndicator(lineL, lineW);
                // #endif
            },
            animationfinish(e) {
                this.refresher = true
                // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                let index = e.detail.current;
                if (this._touchTabIndex === index) {
                    this.isTap = false;
                }
                this._lastTabIndex = index;
                this.switchTab(index);
                this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
                // #endif
            },
            getTabbarItemsSize() {
                // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                uni.createSelectorQuery().in(this).select('.swiper-view').fields({
                    dataset: true,
                    size: true,
                }, (res) => {
                    this.swiperWidth = res.width;
                }).exec();

                uni.createSelectorQuery().in(this).selectAll('.uni-tab-item').boundingClientRect((rects) => {
                    rects.forEach((rect) => {
                        this.tabListSize[rect.dataset.id] = rect;
                    })
                }).exec();

                setTimeout(() => {
                    this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
                }, 100)
                // #endif
            },
            updateIndicator(left, width) {
                const res = this.tabListSize[this.tabIndex]
                const offset = res.right > this.swiperWidth/2 ? left - this.swiperWidth/2 + res.width/2 : 0
                this.scrollToLeft = offset == this.tabList.length - 1 ? res.right : offset
                this.indicatorLineLeft = left + width/4;
                this.indicatorLineWidth = width/2;
            },
            switchTab(index) {
                if (this.pageList[index].dataList.length === 0) {
                    this.loadTabData(index);
                }
                if (this.tabIndex === index) {
                    return;
                }

                // 缓存 tabId
                if (this.pageList[this.tabIndex].data.length > MAX_CACHE_DATA) {
                    let isExist = this.cacheTab.indexOf(this.tabIndex);
                    if (isExist < 0) {
                        this.cacheTab.push(this.tabIndex);
                    }
                }

                this.tabIndex = index;

                // 释放 tabId
                if (this.cacheTab.length > MAX_CACHE_PAGE) {
                    let cacheIndex = this.cacheTab[0];
                    this.clearTabData(cacheIndex);
                    this.cacheTab.splice(0, 1);
                }
            },
            
            loadTabData(index) {
                this.pageList[index].loadData();
            },
            clearTabData(index) {
                this.pageList[index].clear();
            }
        }
    }
</script>

<style lang="scss" scoped>
    $nav-color: #007AFF;
    .swiper-tabs {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
	    height: 100%;
    }

    .tab-bar {
        // width: 750rpx;
        height: 84rpx;
        flex-direction: row;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    /* #ifndef APP-NVUE */
    .tab-bar ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }
    /* #endif */

    .scroll-view-indicator {
        position: relative;
        height: 2px;
        background-color: transparent;
    }

    .scroll-view-underline {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0;
        background-color: $nav-color;
    }

    .scroll-view-animation {
        transition-duration: 0.2s;
        transition-property: left;
    }

    .tab-bar-line {
        height: 1rpx;
        background-color: #cccccc;
    }

    swiper,.swiper-view {
        flex: 1;
        height: 100%;
        width: 100%;
    }

    .uni-tab-item {
        /* #ifndef APP-PLUS */
        display: inline-block;
        /* #endif */
        flex-wrap: nowrap;
        padding-left: 25px;
        padding-right: 25px;
    }

    .uni-tab-item-title {
        color: #555;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        flex-wrap: nowrap;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    .uni-tab-item-title-active {
        color: $nav-color;
    }

    .swiper-item {
        flex: 1;
        flex-direction: column;
    }

    // .swiper-page {
    //     flex: 1;
    //     flex-direction: row;
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     right: 0;
    //     bottom: 0;
    // }
</style>
